import React from 'react';
import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';
import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
    navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';

const components: { title: string; to: string; description: string }[] = [
    {
        title: '设置',
        to: 'settings',
        description: '主题设置，按钮主题色，账号设置等',
    },
];

export function TopNavigationMenu() {
    return (
        <NavigationMenu className='hidden lg:block'>
            <NavigationMenuList>
                <NavigationMenuItem>
                    <Link to='/'>
                        <NavigationMenuLink className={navigationMenuTriggerStyle()}>首页</NavigationMenuLink>
                    </Link>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>使用文档</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <ul className='grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]'>
                            <li className='row-span-3'>
                                <NavigationMenuLink asChild>
                                    <Link
                                        className='flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md'
                                        to='/'
                                    >
                                        <div className='mb-2 mt-4 text-lg font-medium'>shadcn/ui</div>
                                        <p className='text-sm leading-tight text-muted-foreground'>
                                            Beautifully designed components built with Radix UI and Tailwind CSS.
                                        </p>
                                    </Link>
                                </NavigationMenuLink>
                            </li>
                            <li>
                                <ListItem to='/docs' title='Introduction'>
                                    Re-usable components built using Radix UI and Tailwind CSS.
                                </ListItem>
                            </li>
                            <li>
                                <ListItem to='/docs/installation' title='Installation'>
                                    How to install dependencies and structure your app.
                                </ListItem>
                            </li>
                            <li>
                                <ListItem to='/docs/primitives/typography' title='Typography'>
                                    Styles for headings, paragraphs, lists...etc
                                </ListItem>
                            </li>
                        </ul>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>快速导航</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] '>
                            {components.map((component) => (
                                <ListItem key={component.title} title={component.title} to={component.to}>
                                    {component.description}
                                </ListItem>
                            ))}
                        </ul>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <Link to='/portal/about'>
                        <NavigationMenuLink className={navigationMenuTriggerStyle()}>关于我们</NavigationMenuLink>
                    </Link>
                </NavigationMenuItem>
            </NavigationMenuList>
        </NavigationMenu>
    );
}

const ListItem = React.forwardRef<React.ElementRef<typeof Link>, React.ComponentPropsWithoutRef<typeof Link>>(
    ({ className, title, children, to, ...props }, ref) => {
        return (
            <li>
                <NavigationMenuLink asChild>
                    <Link
                        ref={ref}
                        className={cn(
                            'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                            className,
                        )}
                        to={to}
                        {...props}
                    >
                        <div className='text-sm font-medium leading-none'>{title}</div>
                        <p className='line-clamp-2 text-sm leading-snug text-muted-foreground'>{children}</p>
                    </Link>
                </NavigationMenuLink>
            </li>
        );
    },
);
ListItem.displayName = 'ListItem';
